<template>
  <el-dialog title="剧集总览" :visible.sync="show" width="1000px" append-to-body @close="handleClose">
    <div class="content-panel">
      <div style="width: 350px; height: 500px">
        <template v-if="videoUrl">
          <video :key="videoKey" width="100%" height="100%" autoplay controls="controls">
            <source :src="videoUrl" type="video/mp4">
          </video>
        </template>
      </div>
      <div class="list-nav">
        <div v-for="item in listData" :key="item.episode_id" class="list-item">
          <el-button :type="activeId == item.episode_id ? 'primary' : 'info'" @click="handleClick(item)">第{{ item.episode }}集</el-button>
        </div>
      </div>

    </div>
  </el-dialog>
</template>

<script>
import { queryTotalEpisode } from '@/api/video/library'

export default {
  name: 'BrowseDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    library_id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      listData: [],
      videoKey: 1, // 用于强制刷新
      activeId: undefined,
      videoUrl: undefined
    }
  },
  watch: {
    show: {
      handler(val) {
        if (val) this.init()
      }
    }
  },
  methods: {
    async init() {
      const res = await queryTotalEpisode({
        library_id: this.$props.library_id
      })
      const [first] = res
      if (first) {
        this.activeId = first.episode_id
        this.videoKey = first.episode_id
        this.videoUrl = first.video
      }
      this.listData = res
    },
    handleClose() {
      this.videoUrl = undefined
      this.$emit('update:show', false)
    },
    handleClick(item) {
      const { episode_id, video } = item
      this.activeId = episode_id
      this.videoUrl = video
      ++this.videoKey
    }
  }

}
</script>

<style lang="scss" scoped>
.content-panel {
  display: flex;
  align-items: start;
}

.list-nav {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;

  .list-item {
    width: 100px;
    margin-bottom: 10px;
  }

  ::v-deep .el-button {
    padding: 10px 0;
    width: 90%;
  }
}
</style>
